<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom查询</title>
</head>
<body>
    <div id="box">
        <p class="aa">我是一</p>
        <p class="aa">我是二</p>
        <p name="bb">我是三</p>
        <h2 id="h2">我是标题</h2>
    </div>
</body>
<!-- 通过 文档对象/元素对象  查询 -->
<script>
    // 通过 ID 查找
    var box = document.getElementById('box')
    console.log(box); // <div id="box">...</div>
    box.style.background = "#f69"

    // 通过 className 查找  不唯一  伪数组
    var aa = document.getElementsByClassName('aa')
    console.log(aa);  // HTMLCollection [p.aa, p.aa] 伪数组
    aa[0].style.fontSize = '25px'

    // 通过 标签 查找
    var p = document.getElementsByTagName('p') 
    console.log(p); // HTMLCollection(3) [p.aa, p.aa, p]
    p[1].style.fontSize = '25px'

    // 通过 选择器 查找 (id名 标签 后代)
    var h2 = document.querySelector('h2')
    console.log(h2); // <h2 id="h2">我是标题</h2>
    h2.style.color = '#deacba'
    var pAll = document.querySelectorAll('p')
    console.log(pAll); // NodeList(3) [p.aa, p.aa, p]

    // 通过 name 查找
    var bb = document.getElementsByName('bb')
    console.log(bb); // NodeList [p]
    bb[0].style.fontSize = '30px'

    //document.  查询
    //查询 body
    var bod = document.body;
    console.log(bod);

    // 查询 html
    var ht = document.documentElement
    console.log(ht);

    //查询 url
    var ur = document.URL
    console.log(ur);
</script>
</html>